<template>
  <div class="control-item">
    <div class="control-header">
      <span class="control-name">魔方图片</span>
      <span @click="showBeautyBox = true">组件美化</span>
    </div>
    <div class="control-body">
      <div class="control-section">
        <!-- 模板样式 -->
        <div class="control-item">
          <div class="control-title">模板样式</div>
          <div class="control-content">
            <div class="example-list">
              <div
                class="example-item"
                v-for="(item, index) in exampleList"
                :key="index"
                @click="setStyleType(item)"
                :class="params.params.gridNum == item.value ? 'active' : ''"
              >
                <i class="iconfont" :class="item.icon" />
              </div>
            </div>
          </div>
        </div>
        <!-- 标题 -->
        <div class="moudleNameBox">
          <titleControl
            :params="params.params"
            :initText="'魔方图片'"
            :title="'模块标题'"
          ></titleControl>
        </div>
        <div class="control-item">
          <div class="control-head">
            <p class="section-name">魔方布局</p>
            <p class="reset" @click.stop="resetItem('cubeList')">重置</p>
          </div>
          <div class="cube-section">
            <div class="cube-box">
              <div
                class="cube-item"
                :class="gridNum == 3 ? 'gridThree' : ''"
                v-for="(cow, index) in cubeArr"
                :key="index"
              >
                <div
                  class="col-item"
                  v-for="(item, i) in cow.colArr"
                  :key="i"
                  @click="handleItem(cow, item, index, i)"
                >
                  <div
                    class="col-body"
                    @mouseenter="cubeItemEnter(cow, item, index, i)"
                  >
                    <i class="iconfont" :class="item.icon"></i>
                  </div>
                </div>
              </div>
              <div
                class="cube-cover-box"
                :style="currentCubeImg.css"
                @click="handleCubeCover"
                @mousemove="cubeCoverMove"
              ></div>

              <div
                class="cube-cover-item"
                v-for="(item, index) in cubeCoverList"
                :style="{
                  ...item.css,
                  padding: params.params.margin + 'px',
                }"
                :key="'cover-' + index"
                @click="choosePic(item)"
              >
                <span v-if="!item.picUrl || item.picUrl == ''">{{
                  item.css | showSize
                }}</span>
                <img :src="item.picUrl" alt="" v-else />
                <div class="close-icon" @click.stop="deleteCubeItem(index)">
                  x
                </div>
              </div>
            </div>
          </div>
        </div>
        <uploadImg
          v-if="cubeCoverList.includes(current) && current.css"
          :uploadImg="current.picUrl"
          :size="transSize(current.css)"
          @uploadSuccess="uploadSuccess"
          @deleteImg="deleteImg"
        ></uploadImg>
        <chooseLink
          v-if="cubeCoverList.includes(current) && current.css"
          style="margin-top: 12px"
          :link="current.link || {}"
          @chooseEnd="chooseLink"
        ></chooseLink>
        <div class="control-item space">
          <div class="control-head">
            <p class="section-name">图片间距</p>
            <p class="reset" @click.stop="resetItem('imgSpace')">重置</p>
          </div>
          <!-- 间距设置 -->
          <div class="control-body">
            <i class="iconfont icon-xiajianju"></i>
            <a-slider
              class="slider"
              v-model="params.params.margin"
              :min="0"
              :max="20"
            />
            <div
              @mouseenter="showNumVSet = !showNumVSet"
              @mouseleave="showNumVSet = !showNumVSet"
            >
              <a-input-number
                v-show="showNumVSet"
                class="slider-input"
                :min="0"
                :max="50"
                v-model="params.params.margin"
              />
              <span class="borderNumSpan" v-show="!showNumVSet">{{
                params.params.margin || 0
              }}</span>
              <span>px</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 组件美化 -->
    <comBeautyBox
      :showBeautyBox="showBeautyBox"
      @handleBack="showBeautyBox = false"
    >
      <div>
        <!-- 背景配置 -->
        <bgControl :backgroudData="params.moduleCss"></bgControl>
        <!-- 间距控制组件 -->
        <spaceControl
          :spaceData.sync="params.moduleCss"
          @resetSpace="resetSpace"
          @resetMp="resetMp"
        ></spaceControl>
      </div>
    </comBeautyBox>
  </div>
</template>

<script>
import bgControl from "@/components/DiyNew/diy/baseControl/bgControl/index.vue";
import comBeautyBox from "@/components/DiyNew/diy/comBeautyBox/comBeautyBox.vue";
import spaceControl from "@/components/DiyNew/diy/baseControl/spaceControl/index.vue";
import titleControl from "@/components/DiyNew/diy/baseControl/titleControl/index.vue";
import { threeLineArr, fourLineArr } from "./data.js";
import { throttle } from "@/utils/utils.js";
import uploadImg from "@/components/DiyNew/uploadImg/index.vue";
import chooseLink from "@/components/DiyNew/chooseLink/index.vue";
export default {
  name: "containerControl",
  components: {
    bgControl,
    comBeautyBox,
    spaceControl,
    titleControl,
    uploadImg,
    chooseLink,
  },
  props: {
    params: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      showBeautyBox: false,
      exampleList: [
        {
          icon: 'icon-a-3x3',
          type: "模板1",
          value: "3",
        },
        {
          icon: 'icon-a-4x4',
          type: "模板2",
          value: "4",
        },
      ],
      c: true,
      localArr: [],
      currentCubeImg: {
        css: {
          width: "0",
          height: "0",
        },
        item: null,
      },
      cubeWidth: 228,
      cubeHeight: 228,
      localStart: [],
      current: {},
      isHandleStart: true,
      showNumVSet: false,
    };
  },
  watch: {},
  computed: {
    gridNum: {
      get() {
        return this.params.params.gridNum || 4;
      },
    },
    cubeCoverList() {
      return this.params.params.cubeCoverList || [];
    },
    cubeBoxHeight: {
      get() {
        return this.params.params.cubeBoxHeight || 0;
      },
      set(e) {
        this.params.params.cubeBoxHeight = e;
      },
    },
    cubeArr() {
      if (this.gridNum == 4) {
        return fourLineArr;
      }
      if (this.gridNum == 3) {
        return threeLineArr;
      }
    },
  },
  filters: {
    showSize(val) {
      let width = parseFloat(val.width).toFixed(0);
      let height = parseFloat(val.height).toFixed(0);
      let boxWidth = 750;
      let w = parseInt(boxWidth * (width / 100));
      let h = parseInt(boxWidth * (height / 100));
      return `${w}*${h}`;
    },
  },
  created() {},
  methods: {
    transSize(val) {
      let width = parseFloat(val.width).toFixed(0);
      let height = parseFloat(val.height).toFixed(0);
      let boxWidth = 750;
      let w = parseInt(boxWidth * (width / 100));
      let h = parseInt(boxWidth * (height / 100));
      return `${w}*${h}`;
    },
    // 设置样式
    setStyleType(item) {
      this.resetCubeImg();
      this.$setWithAction(this.params.params, "gridNum", item.value);
    },
    // 重置魔方图片布局
    resetCubeImg() {
      this.$set(this.params.params, "cubeCoverList", []);
      this.$set(this.params.params, "cubeBoxHeight", 0);
      this.localArr = [];
      this.localStart = [];
      this.currentCubeImg = {
        css: {
          width: "0",
          height: "0",
        },
        item: null,
      };
      this.isHandleStart = true;
    },
    // 点击隐藏按钮
    handleHiddenIcon() {
      let flag = this.params.params.useTitle == 1 ? 2 : 1;
      this.$set(this.params.params, "useTitle", flag);
    },
    // 点击重置按钮
    resetItem(type) {
      if (type == "moduleName") {
        this.$set(this.params.params, "useTitle", 1);
      }
      if (type == "cubeList") {
        this.$set(this.params.params, "cubeCoverList", []);
      }
    },
    // 重置圆角
    resetSpace(e) {
      let type = e.type;
      this.$set(this.params.moduleCss, type, 0);
    },
    // 重置边距
    resetMp() {
      this.$set(this.params.moduleCss, "margin", 0);
      this.$set(this.params.moduleCss, "padding", 0);
    },
    // 魔方网格
    checkHasLocal(data) {
      let hasIndex = this.localArr.findIndex((d) => {
        return d.toString() == data.toString();
      });
      return hasIndex >= 0;
    },
    // 点击开始选择区域
    handleItem(cow, item, index, i) {
      // console.log(cow, item, index, i, this.checkHasLocal(item.loc));
      if (this.checkHasLocal(item.loc)) return;
      this.localStart = item.loc;
      let css = {
        width: "25%",
        height: "25%",
        left: (item.loc[0] / this.gridNum) * 100 + "%",
        top: (item.loc[1] / this.gridNum) * 100 + "%",
      };
      if (this.gridNum == 3) {
        css.width = "33.3%";
        css.height = "33.3%";
      }
      this.currentCubeImg.css = css;
      // console.log(this.currentCubeImg);
      this.isHandleStart = false;
    },
    // 监听格子内鼠标滑过事件，添加格子进入选择区域
    cubeItemEnter(cow, item, index, i) {
      if (this.isHandleStart) return;
      let local = item.loc;
      let start = this.localStart;
      let xDeal = Math.abs(local[0] - start[0]);
      let yDeal = Math.abs(local[1] - start[1]);
      if (xDeal == 0) xDeal = 1;
      if (yDeal == 0) yDeal = 1;
      let css = {
        width: "0",
        height: "0",
        left: "0",
        top: "0",
      };
      // console.log("每个进来了", xDeal, yDeal, start, local);
      if (local[0] < start[0]) {
        if (local[1] > start[1]) {
          css.left = (local[0] / this.gridNum) * 100 + "%";
          css.top = (start[1] / this.gridNum) * 100 + "%";
          css.height = ((yDeal + 1) / this.gridNum) * 100 + "%";
        } else if (local[1] == start[1]) {
          css.left = (local[0] / this.gridNum) * 100 + "%";
          css.top = (local[1] / this.gridNum) * 100 + "%";
          css.height = (yDeal / this.gridNum) * 100 + "%";
        } else if (local[1] < start[1]) {
          css.left = (local[0] / this.gridNum) * 100 + "%";
          css.top = (local[1] / this.gridNum) * 100 + "%";
          css.height = ((yDeal + 1) / this.gridNum) * 100 + "%";
        }
        css.width = ((xDeal + 1) / this.gridNum) * 100 + "%";
      }

      if (local[0] > start[0]) {
        if (local[1] > start[1]) {
          css.left = (start[0] / this.gridNum) * 100 + "%";
          css.top = (start[1] / this.gridNum) * 100 + "%";
          css.height = ((yDeal + 1) / this.gridNum) * 100 + "%";
        } else if (local[1] == start[1]) {
          css.left = (start[0] / this.gridNum) * 100 + "%";
          css.top = (local[1] / this.gridNum) * 100 + "%";
          css.height = (yDeal / this.gridNum) * 100 + "%";
        } else if (local[1] < start[1]) {
          css.left = (start[0] / this.gridNum) * 100 + "%";
          css.top = (local[1] / this.gridNum) * 100 + "%";
          css.height = ((yDeal + 1) / this.gridNum) * 100 + "%";
        }
        css.width = ((xDeal + 1) / this.gridNum) * 100 + "%";
      }

      if (local[0] == start[0]) {
        css.width = (xDeal / this.gridNum) * 100 + "%";
        css.height = ((yDeal + 1) / this.gridNum) * 100 + "%";
        if (local[1] > start[1]) {
          css.left = (local[0] / this.gridNum) * 100 + "%";
          css.top = (start[1] / this.gridNum) * 100 + "%";
        } else if (local[1] < start[1]) {
          css.left = (local[0] / this.gridNum) * 100 + "%";
          css.top = (local[1] / this.gridNum) * 100 + "%";
        } else if (local[1] == start[1]) {
          css.left = (start[0] / this.gridNum) * 100 + "%";
          css.top = (start[1] / this.gridNum) * 100 + "%";
        }
      }
      // 碰撞检查¸
      // console.log("碰住我了啊", this.checkCollision(css));
      if (this.checkCollision(css)) return;

      this.currentCubeImg.css = css;
      // console.log(this.currentCubeImg);
    },
    // 碰撞检查
    checkCollision(css) {
      if (!this.cubeCoverList.length) return false;
      let flag = false;
      this.cubeCoverList.forEach((d) => {
        let itemFull = parseInt(d.css.left) + parseInt(d.css.width);
        let itemLeft = parseInt(d.css.left);
        let itemTop = parseInt(d.css.top);
        let itemHfull = itemTop + parseInt(d.css.height);
        let enterFull = parseInt(css.left) + parseInt(css.width);
        let enterLeft = parseInt(css.left);
        let enterTop = parseInt(css.top);
        let enterHfull = enterTop + parseInt(css.height);
        // console.log([itemTop, itemHfull], [enterTop, enterHfull]); //  [25, 75]  [0, 100]
        if (
          (enterLeft >= itemLeft && enterLeft < itemFull) ||
          (enterFull > itemLeft && enterFull <= itemFull) ||
          (enterLeft <= itemLeft && enterFull >= itemFull)
        ) {
          if (
            (enterTop >= itemTop && enterTop < itemHfull) ||
            (enterHfull > itemTop && enterHfull <= itemHfull) ||
            (enterTop <= itemTop && enterHfull >= itemHfull)
          )
            flag = true;
        }
      });
      return flag;
    },
    // 选择区域后点击，确认选择区域
    handleCubeCover() {
      this.isHandleStart = true;
      let css = Object.assign({}, this.currentCubeImg.css);
      this.cubeCoverList.push({
        css: css,
        isEnd: true,
      });
      // 计算盒子宽高
      this.computedBoxSize();
      // console.log("盒子计算后的高度", this.cubeBoxHeight);
      this.currentCubeImg = {
        css: {
          width: "0",
          height: "0",
        },
        item: null,
      };
    },
    // 删除选中的区域
    deleteCubeItem(index) {
      this.cubeCoverList.splice(index, 1);
      if (this.cubeCoverList.length) {
        this.computedBoxSize();
      }
      this.localArr = [];
    },
    // 计算盒子宽高
    computedBoxSize() {
      let yArr = [];
      this.cubeCoverList.forEach((d) => {
        if (d.css?.top) {
          yArr.push(parseFloat(d.css.top));
          let full = parseFloat(d.css.top) + parseFloat(d.css.height);
          yArr.push(full);
        }
        if (d.css?.bottom) {
          yArr.push(parseFloat(d.css.bottom));
          yArr.push(full);
        }
      });
      let arr = yArr.sort((a, b) => {
        if (a > b) {
          return 1;
        } else if (a < b) {
          return -1;
        } else {
          return 0;
        }
      });
      console.log("高度数组", yArr);
      let endHeight = arr[arr.length - 1];
      this.cubeBoxHeight = endHeight.toFixed(2) + "%";
    },
    // 选择区域鼠标滑动事件监听，回退计算
    cubeCoverMove: throttle((that, e) => {
      if (that.isHandleStart) return;
      let { layerX, layerY } = e;
      let start = that.localStart;
      let locX =
        Math.abs(Math.ceil(layerX / (that.cubeWidth / that.gridNum))) -
        1 +
        start[0];
      let locY =
        Math.abs(Math.ceil(layerY / (that.cubeHeight / that.gridNum))) -
        1 +
        start[1];
      let xDeal = Math.abs(locX - start[0]);
      let yDeal = Math.abs(locY - start[1]);
      // console.log(locX, locY, start[0], start[1]);

      let css = {};
      if (xDeal == 0) xDeal = 1;
      if (yDeal == 0) yDeal = 1;
      if (locX == start[0] && locY == start[1]) {
        css = {
          width: (xDeal / that.gridNum) * 100 + "%",
          height: (yDeal / that.gridNum) * 100 + "%",
          left: (locX / that.gridNum) * 100 + "%",
          top: (locY / that.gridNum) * 100 + "%",
        };
      }
      if (locX > start[0]) {
        if (locY > start[1]) {
          css = {
            width: (xDeal / that.gridNum) * 100 + "%",
            height: (yDeal / that.gridNum) * 100 + "%",
            left: (start[0] / that.gridNum) * 100 + "%",
            top: (start[1] / that.gridNum) * 100 + "%",
          };
        } else if (locY < start[1]) {
          css = {
            width: (xDeal / that.gridNum) * 100 + "%",
            height: (yDeal / that.gridNum) * 100 + "%",
            left: (start[0] / that.gridNum) * 100 + "%",
            bottom: ((start[1] - 1) / that.gridNum) * 100 + "%",
          };
        } else if (locY == start[1]) {
          css = {
            width: (xDeal / that.gridNum) * 100 + "%",
            height: (yDeal / that.gridNum) * 100 + "%",
            left: (start[0] / that.gridNum) * 100 + "%",
            top: (start[1] / that.gridNum) * 100 + "%",
          };
        }
      } else {
        // if (locY > start[1]) {
        //   css = {
        //     width: (xDeal / 4) * 100 + "%",
        //     height: (yDeal / 4) * 100 + "%",
        //     left: that.currentCubeImg.css.left,
        //     right: (start[1] / 4) * 100 + "%",
        //   };
        // } else {
        //   css = {
        //     width: (xDeal / 4) * 100 + "%",
        //     height: (yDeal / 4) * 100 + "%",
        //     bottom: (start[1] / 4) * 100 + "%",
        //     right: (start[0] / 4) * 100 + "%",
        //   };
        // }
      }
      that.currentCubeImg.css = css;

      // console.log(xDeal, yDeal);
    }, 100),
    choosePic(e) {
      this.current = e;
    },
    uploadSuccess(e) {
      this.$set(this.current, "picUrl", e.val);
    },
    chooseLink(e) {
      this.$set(this.current, "link", e);
    },
    // 删除图片回调
    deleteImg(e) {
      this.$set(this.current, "picUrl", "");
    },
  },
};
</script>

<style lang="scss" scoped>
.control-item {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .control-header {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    justify-content: space-between;
    padding: 14px 24px 14px 24px;
    span {
      font-size: 12px;
      color: #8c8c8c;
    }
    .control-name {
      font-size: 14px;
      font-weight: 600;
      color: #000000;
    }
    span:nth-child(2) {
      cursor: pointer;
    }
  }
  .control-body {
    width: 100%;
    .control-section {
      width: 228px;
      margin: 0 auto;
      text-align: center;
      padding-top: 48px;
      padding-bottom: 60px;
      .control-item {
        width: 100%;
        .control-title {
          padding: 24px 0 14px 0;
          font-size: 12px;
          color: #000000;
          text-align: left;
        }
        .control-content {
          .example-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .example-item {
              width: 70px;
              height: 70px;
              background: #f6f7f9;
              border-radius: 4px;
              margin-right: 9px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              overflow: hidden;
              .iconfont {
                font-size: 60px;
              }
            }
            .example-item:last-child {
              margin-right: 0;
            }
            .active {
              border: 2px solid #1890fc;
            }
          }
        }
      }
      .title-section,
      .capsule-section {
        .flex-between {
          display: flex;
          justify-content: space-between;
          .reset {
            font-size: 12px;
            color: #9e9e9e;
            cursor: pointer;
          }
        }
        .control-content {
          display: flex;
          align-items: center;
          .title-name-input {
            width: 196px;
            height: 40px;
            border-radius: 4px;
            input {
              height: 100%;
              background-color: #f6f7f9;
              border: 0 none;
            }
          }
          .hidden-icon {
            width: 24px;
            height: 24px;
            background: #f6f7f9;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            margin-left: 8px;
            cursor: pointer;
          }
        }
      }

      .capsule-section {
        .control-content {
          width: 100%;
          height: 40px;
          background: #f6f7f9;
          border-radius: 4px;
          .capsule-select {
            width: 100%;
            height: 100%;
            ::v-deep .ant-select-selection--single {
              height: 100%;
              border: 0 none;
              background: #f2f2f2;
            }
            ::v-deep .ant-select-selection__rendered {
              line-height: 40px;
            }
          }
        }
      }

      .couponColor {
        .flex-between {
          display: flex;
          justify-content: space-between;
          .reset {
            font-size: 12px;
            color: #9e9e9e;
            cursor: pointer;
          }
        }
        .couponColor-select {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .color-item {
            width: 34px;
            height: 34px;
            border-radius: 4px;
            margin-right: 4px;
            margin-bottom: 4px;
            cursor: pointer;
          }
          .color-item:last-child {
            margin-right: 0;
          }
          .active {
            border: 2px solid #1890fc;
          }
        }
      }
    }
  }
}
.cube-section {
  width: 228px;
  height: 228px;
  background: #ffffff;
  .cube-box {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    // overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #f6f7f9;
    position: relative;
    .cube-item {
      width: 25%;
      height: 100%;
      border-right: 2px solid #f6f7f9;
      .col-item {
        width: 100%;
        height: 25%;
        border-bottom: 2px solid #f6f7f9;
        .col-body {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .iconfont {
            color: #000000;
            font-size: 13px;
          }
        }
      }
    }
    .cube-item:first-child {
      border-left: 2px solid #f6f7f9;
    }
    .gridThree {
      width: 33.3%;
      .col-item {
        height: 33.3%;
      }
    }
    .cube-cover-box {
      position: absolute;
      z-index: 5;
      background: #e6f3ff;
      border-radius: 4px;
    }
    .cube-cover-item {
      box-sizing: border-box;
      position: absolute;
      z-index: 5;
      background: #e6f3ff;
      border: 2px solid #0084fb;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #1890fc;
      user-select: none;
      .close-icon {
        width: 14px;
        height: 14px;
        background: #ff5414;
        border-radius: 50%;
        right: -7px;
        top: -7px;
        z-index: 21;
        font-size: 12px;
        text-align: center;
        line-height: 14px;
        color: #ffffff;
        position: absolute;
        display: none;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cube-cover-item:hover {
      .close-icon {
        display: block;
        cursor: pointer;
      }
    }
  }
}
.control-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 12px 0;
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  .reset {
    font-size: 12px;
    font-weight: 400;
    color: #8e8e8e;
    cursor: pointer;
    user-select: none;
  }
  p {
    margin: 0;
  }
}
.space {
  .control-body {
    width: 100%;
    height: 40px;
    background: #f6f7f9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding-left: 14px;
    .iconfont {
      font-size: 20px;
    }
    .slider {
      margin: 0 16px;
      width: 100px;
      ::v-deep .ant-slider-track {
        background-color: #1890fc;
      }
      ::v-deep .ant-slider-rail {
        background-color: #e6e6e6;
      }
    }
    .slider-input {
      width: 30px;
      font-size: 12px;
      background-color: #f6f7f9;
      ::v-deep .ant-input-number-input {
        padding: 0;
        padding-right: 5px;
        text-align: right;
      }
    }
    span {
      font-size: 12px;
      color: #000000;
    }
    .borderNumSpan {
      width: 30px;
      display: inline-block;
      text-align: right;
      padding-right: 5px;
      border: 1px solid #f6f7f9;
    }
    ::v-deep .ant-input-number-handler-wrap {
      display: none;
    }
  }
}
</style>
